<!-- 加注记录 -->
<template>
	<view>
		<view class="header">
			<view class="header-t u-f-jsb">
				<view class="u-f-jsb header-t-l">
					<view class="u-f-ac" @tap="showSiteDropmenu = !showSiteDropmenu;showDateSelector = false;">
						<view class="jiazhu" :class="[selectedIndex==0?'':'active']">{{machineList[selectedIndex].macName}}</view>
						<u-icon 
							class="icon" 
							:class="[showSiteDropmenu?'ang1':'ang2']" 
							name="arrow-down-fill" 
							:color="[selectedIndex==0?'#242f44':'#FFCE00']" 
							size="28"
						></u-icon>
					</view>
				</view>
				<view v-if="dateType==2" @tap="openDateSelector">
					<template>
						<text style="font-size: 50rpx;">{{date1.split('-')[1]}}</text>
						月{{date1.split('-')[0]}}年
					</template>
				</view>
				<view v-if="dateType==1" style="text-align: right;" @tap="openDateSelector">
					<template  v-if="date1">
						<view>{{date1}}</view>
						<view>{{date2}}</view> 
					</template>
					<image v-else class="icon-rili" src="../../../static/images/icon-rili.png" mode="aspectFill"></image>
				</view>
				
			</view>
			<view class="header-b" :class="[showTongji?'show':'hidden']">
				<view class="tongji">
					<view class="u-f-ac">
						<image src="/static/images/icon-jiazhu.png" mode="aspectFill"></image>
						<view>
							<view class="num">{{earningsListInfo.fillNum?earningsListInfo.fillNum:0 | kg2ton}}</view>
							<view class="label">加注总量(吨)</view>
						</view>
					</view>
					<view></view>
					<view class="u-f-ac">
						<image src="/static/images/icon-qiangbao.png" mode="aspectFill"></image>
						<view>
							<view class="num">{{earningsListInfo.earnMoney?earningsListInfo.earnMoney:'0.00'}}</view>
							<view class="label">收益额(元)</view>
						</view>
					</view>
				</view>
			</view>
			<view class="site-dropmenu" :class="[showSiteDropmenu?'show':'hidden']">
				<block v-for="(item,index) in machineList" :key="index">
					<view class="site-item" :class="[selectedIndex==index?'active':'']" @tap="changeSelectedIndex(index)">
						{{item.macName}}
					</view>
				</block>
				
			</view>
		</view>
		<view class="list" @touchend="touchendEvent" >
			<block v-for="(item,index) in earningsList" :key="index">
				<view class="item">
					<image class="item-l" :src="item.userPhoto" mode="aspectFill"></image>
					<view class="item-r">
						<view class="u-f-jsb">
							<view>{{item.userName}}</view>
							<view class="price"><text>￥</text>{{item.orderMoney | toFixed2}}</view>
						</view>
						<view class="u-f-jsb">
							<view>{{item.siteName}}</view>
							<view>加注{{item.actualWeight | toFixed2}}kg</view>
						</view>
						<view class="u-f-jsb">
							<view>{{item.macName}}</view>
							<view style="flex-shrink: 0;">{{item.finishTime}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="no-data" v-if="earningsList.length==0 && status!='loading'">
			<image src="/static/images/noData1.png" mode="aspectFill"></image>
			暂无记录
		</view>
		<loading-bar v-if="showLoadbar"  :status="status"></loading-bar>
		<ym-date-selector :show.sync="showDateSelector" ref="dateSelector" @selected="selectedDate"></ym-date-selector>
		<view class="mask" v-if="showSiteDropmenu"  @tap="maskClick"></view>
	</view>
</template>

<script>
import ymDateSelector from "@/components/ym-date-selector/ym-date-selector.vue";
import loadingBar from "@/components/loading-bar/loading-bar.vue";
export default {
	components:{ymDateSelector,loadingBar},
	data() {
		return {
			oldScrollTop:0,
			showTongji:true, 
			showSiteDropmenu:false, // 显示加注站菜单
			showDateSelector: false, // 显示日期选择器
			status:'loading', // 加载状态
			selectedIndex: 0 ,// 当前选中加注机
			earningsListInfo: '' ,//收益明细列表
			earningsList:'',
			date1:'', // 开始时间
			date2:'' ,// 结束时间
			page: 1,
			limit: 20,
			dateType: '2', // 1 为日模式；2 为月模式
			showLoadbar: true,
		};
	},
	computed:{
		machineList() {
			return [{macName:'全部',macId:-1},...this.$store.state.machinelist];
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if(this.scrollTop - this.oldScrollTop > 5) {
			// 向下滑动
			this.$u.throttle(this.changeShowTongji(false), 500);
		} 
		if (this.scrollTop - this.oldScrollTop < -5) {
			// 向上滑动
			this.$u.throttle(this.changeShowTongji(true), 100);
		}
	},
	onReachBottom() {
		this.page++;
		this.status = 'loading';
		this.getEarningsList();
	},
	onLoad(options) {
		console.log(options);
		this.macId = '';
		if(options.id) {
			this.selectedIndex = this.machineList.findIndex(item => item.macId == options.id);
			this.macId = options.id;
		}
		if(options.sTime && options.eTime) {
			this.date1 = options.sTime;
			this.date2 = options.eTime;
			this.dateType = 1;
		} else {
			let now = new Date();
			let year = now.getFullYear();
			let month = (now.getMonth()+1).toString().padStart(2,0);
			let day = now.getDate().toString().padStart(2,0);
			let totalDays = new Date(year,month,0).getDate();
			this.date1 = `${year}-${month}-01`;
			this.date2 = `${year}-${month}-${day}`;
		}
		this.getEarningsList();
	},
	methods:{
		// 收益明细
		getEarningsList() {
			let {date1='',date2='',page,limit,macId} = this;
			if(this.selectedIndex!=0) {
				macId = this.machineList[this.selectedIndex].macId;
			}
			this.$u.api._getEarningsList({macId,startTime:date1,endTime:date2,page,limit,dateType:1}).then(res => {
				this.earningsListInfo = {earnMoney:res.earnMoney,fillNum:res.fillNum};
				this.earningsList = [...this.earningsList,...res.lstOrders.data];

				if(res.lstOrders.count === 0 && page === 1) {
					this.showLoadbar = false;
				} else {
					this.showLoadbar = true;
				}
				if( res.lstOrders.data.length<limit) {
					this.status = 'nomore';
				}
				this.changeShowTongji(true);
			})
		},
		// 选择加注机
		changeSelectedIndex(index) {
			this.selectedIndex = index;
			if(this.selectedIndex==0) {
				this.macId = '';
			};
			this.page = 1;
			this.earningsList = [];
			this.maskClick();
			this.getEarningsList();	
		},
		touchendEvent(e) {
			this.oldScrollTop = this.scrollTop;
		},
		changeShowTongji(bool){
			this.showTongji = bool;
		},
		openDateSelector() {
			this.$refs.dateSelector.toggle();
			this.showSiteDropmenu = false;
		},
		maskClick() {
			this.showDateSelector = false;
			this.showSiteDropmenu = false;
		},
		// 选择日期
		selectedDate(e) {
			this.date1 = e.date1;
			this.date2 = e.date2;
			this.dateType = e.isDayMode?1:2;
			this.page = 1;
			this.earningsList = [];
			this.getEarningsList();
		}
 	}
};
</script>

<style lang="scss">
page {
	background-color: RGBA(245, 245, 245, 1);
}
.mask {
	position: fixed;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.3); 
	z-index: 1;
	animation: fadeIn 0.5s;
}
.icon-rili {
	width: 52rpx;
	height: 60rpx;
}
.no-data {
	margin-top: 400rpx;
}

.header {
	position: fixed;
	top: 0;
	width: 100vw;
	background-color: #ffffff;
	z-index: 1000;

	.header-t {
		position: absolute;
		top: 0;
		height: 88rpx;
		width: 100vw;
		padding: 30rpx;
		background-color: #FFFFFF;
		z-index: 100;
		.icon {
			width: 26rpx;
			height: 18rpx;
			margin-left: 10rpx;
			margin-top: 3rpx;
			transition: all 0.3s;
			
			&.ang1 {
				transform: rotate(180deg);
			}
			&.ang2{
				transform: rotate(0deg);
			}
		}

		> view:nth-child(1) {
			width: 250rpx;
		}
		.jiazhu {
			max-width: 400rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: center;
			white-space: nowrap;
			margin-left: 50rpx; 
			font-size: 30rpx;
			&.active {
				color: rgba(255, 206, 0, 1);
			}
		}
		.header-t-l {
			display: flex;
			align-items: center;
			 
			>view {
				flex-shrink: 0;
				padding: 10rpx 0;
			}
		}
	}
	
	.header-b {
		position: absolute;
		top: 88rpx;
		height: 150rpx;
		width: 100vw;
		z-index: 2;
		background-color: #FFFFFF;
		border-radius: 0 0 50rpx 50rpx;
		overflow: hidden;
		box-shadow: 0 0 1rpx 2rpx #eee;
		transition: transform linear 0.28s ;
		
		&.show {
			transform: translateY(0);
		}
		&.hidden {
			transform: translateY(-100%);
		}
	}
	.site-dropmenu {
		position: absolute;
		top: 88rpx;
		width: 100vw;
		min-height: 160rpx;
		max-height: 70vh;
		overflow-y: scroll;
		background-color: #FFFFFF;
		transition: transform linear 0.28s ;
		z-index: 2;
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		&.show {
			transform: translateY(0);
		}
		&.hidden {
			transform: translateY(-102%);
		}
		
		.site-item {
			color: rgba(102, 102, 102, 1);
			width: 48%;
			height: 80rpx;
			border-radius: 16rpx;
			background-color: rgba(248, 248, 248, 1);
			line-height: 80rpx;
			text-align: center;
			margin-bottom: 24rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 0 10rpx;
			&.active {
				background-color: rgba(255, 206, 0, 1);
				color: rgba(36, 47, 68, 1);
			}
			&:nth-child(2n+1) {
				margin-right: 3%;
			}
		}
	}
}
.tongji {
	display: flex;
	justify-content: space-evenly;
	padding-bottom: 50rpx;
	border-bottom: 1rpx solid #eee;
	
	padding-top: 30rpx;

	.num {
		font-size: 36rpx;
	}
	.label {
		font-size: 20rpx;
		color: #888;
	}
	> view:nth-child(1) {
		image {
			width: 52rpx;
			height: 55rpx;
			flex-shrink: 0;
			margin-right: 28rpx;
		}
	}

	> view:nth-child(2) {
		height: 60rpx;
		width: 1rpx;
		background-color: rgba(222, 222, 222, 1);
	}
	> view:nth-child(3) {
		image {
			width: 54rpx;
			height: 55rpx;
			flex-shrink: 0;
			margin-right: 28rpx;
		}
	}
}

.list {
	margin: 280rpx 20rpx 0 20rpx;
	background-color: #FFFFFF;
	padding:0 30rpx;
	border-radius: 20rpx;
	
	.item {
		display: flex;
		padding: 24rpx 0 20rpx 0;
		border-bottom: 1rpx solid #eee;
		
		.item-l {
			width: 60rpx;
			height: 60rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
			margin-top: 10rpx;
			border-radius: 50%;
		}
		
		.item-r {
			color: rgba(102, 102, 102, 1);
			font-size: 24rpx;
			flex: 1;
			overflow: hidden;
			
			>view:nth-child(1) {
				color: rgba(51, 51, 51, 1);	
				font-size: 30rpx;
				margin: 16rpx;
				// text-overflow: ellipsis;
				// overflow: hidden;
				// white-space: nowrap;
			}
			>view:nth-child(2),:nth-child(3) {
				color: rgba(102, 102, 102, 1);	
				font-size: 26rpx;
				margin: 10rpx;
				flex-shrink: 0;
			}
			
			.price {
				font-size: 32rpx;
				color: rgba(255, 132, 0, 1);
				font-weight: bold;
			}
		}
		
	}
}


</style>
